<script setup lang="ts">
import type { UploadType } from "@/common/constants/other-keys"
import type { UploadProps, UploadRawFile, UploadUserFile } from "element-plus"
import { genFileId } from "element-plus"
import { ref } from "vue"
import SvgIcon from "~virtual/svg-component"

interface Props {
  uploadFiles: File[] | UploadUserFile[]
  accept: string
  fileName: string
  uploadType: UploadType | undefined
}
defineProps<Props>()
const emit = defineEmits(["update:uploadFiles", "update:uploadType"])

const folderFiles = ref<File[]>([])
const FolderInputRef = ref()
const UploadFileRef = ref()
const fileList = ref<UploadUserFile[]>([])

const handleFileChange: UploadProps["onChange"] = (uploadFile) => {
  fileList.value = [uploadFile]
  emit("update:uploadFiles", fileList.value)
  emit("update:uploadType", "File")
  folderFiles.value = []
}
const handleFileExceed: UploadProps["onExceed"] = (files) => {
  UploadFileRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  UploadFileRef.value!.handleStart(file)
}
function handleFolderSelect(event: Event) {
  const target = event.target as HTMLInputElement
  if (target && target.files) {
    folderFiles.value = Array.from(target.files)
    fileList.value = []
  } else {
    folderFiles.value = []
  }
  emit("update:uploadFiles", folderFiles.value)
  emit("update:uploadType", "Folder")
}
function handleUploadFolder() {
  FolderInputRef.value.click()
}
</script>

<template>
  <div class="upload-folder" style="width: 100%">
    <div class="upload-folder__input" :title="fileName">
      {{ fileName }}
    </div>
    <el-upload
      ref="UploadFileRef"
      v-model:file-list="fileList"
      :limit="1"
      :show-file-list="false"
      class="upload-demo"
      :accept="accept"
      :auto-upload="false"
      :on-exceed="handleFileExceed"
      :on-change="handleFileChange"
    >
      <template #trigger>
        <el-tooltip content="选择文件">
          <el-link type="primary" :underline="false">
            <el-icon :size="16">
              <DocumentAdd />
            </el-icon>
          </el-link>
        </el-tooltip>
      </template>
    </el-upload>
    <el-tooltip content="选择文件夹">
      <el-link :underline="false" type="primary" @click="handleUploadFolder">
        <el-icon :size="16">
          <Folder />
        </el-icon>
      </el-link>
    </el-tooltip>
    <input type="file" ref="FolderInputRef" webkitdirectory style="display: none" @change="handleFolderSelect">
  </div>
</template>

<style lang="scss" scoped>
@import "@@/assets/styles/mixins.scss";

:deep(.el-upload) {
  height: 100%;
  display: flex;
  align-items: center;
}
.upload-demo {
  height: 32px;
  margin-left: 5px;
}
.upload-folder {
  --el-input-width: 32px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width);
  border: 1px solid var(--el-border-color);
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}

.upload-folder__input {
  flex: 1;
  min-width: 0;
  padding-left: 11px;
  @extend %ellipsis;
}

.el-link {
  margin-right: 10px;
}
</style>
